import {defineComponent, PropType, ref} from 'vue';
import './MedicalBill.scss';
import {hColgroup} from "element-plus/es/components/table/src/h-helper";

// 项目项类型
interface Item {
    name: string;
    unitPrice: number;
    quantity: number;
    subtotal: number;
}

// 账单数据类型
interface BillData {
    department: string;
    doctor: string;
    items: Item[];
    total: number;
    patient: string;
    medicalNo: string;
}

export default defineComponent({
    props: {
        onClose: {
            type: Function as PropType<() => void>,
            required: true
        }
    },
    setup(props) {
        const isModalVisible = ref(true); // 控制弹窗显隐
        const closeModal = () => {
            if (props.onClose) {
                props.onClose();

            }
        };
        // 模拟账单数据
        const billData: BillData = {
            department: '皮肤科门诊',
            doctor: '李医生',
            items: [
                { name: '京制牛黄解毒片', unitPrice: 5.0, quantity: 1, subtotal: 5.0 },
                { name: '健胃消食片', unitPrice: 4.2, quantity: 2, subtotal: 8.4 },
                { name: '卡托普利片', unitPrice: 14.3, quantity: 1, subtotal: 14.3 },
                { name: '糖类抗原测定(CA19-9)', unitPrice: 87.0, quantity: 1, subtotal: 87.0 },
            ],
            total: 116.7,
            patient: '张*芬',
            medicalNo: '12456212323121',
        };



        return () =>
            isModalVisible.value ? (
                <div class="modal-overlay">
                    {/* 弹窗容器：宽度806px，高度1245px，居中 */}
                    <div class="medical-bill-modal">
                        {/* 头部：标题 + 关闭按钮 */}
                        <div class="modal-header">
                            <h2>医药费</h2>
                            <button class="close-btn" onClick={closeModal}>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <line x1="18" y1="6" x2="6" y2="18" />
                                    <line x1="6" y1="6" x2="18" y2="18" />
                                </svg>
                            </button>
                        </div>

                        {/* 科室、医生信息 */}
                        <div class="dept-doctor">
                            <span>就诊科室：{billData.department}</span>
                            <span>开方医生：{billData.doctor}</span>
                        </div>

                        {/* 项目列表 */}
                        <div class="items-table">
                            <div class="table-header">
                                <span>项目 (单价/数量)</span>
                                <span>小计</span>
                            </div>
                            {billData.items.map((item, index) => (
                                <div class="table-row" key={index}>
                                    <div class="item-info">
                                        <p class="item-name">{item.name}</p>
                                        <p class="item-unit">单价：¥{item.unitPrice.toFixed(1)} x {item.quantity}</p>
                                    </div>
                                    <p class="item-subtotal">¥{item.subtotal.toFixed(2)}</p>
                                </div>
                            ))}
                        </div>

                        {/* 分页 */}
                        <div class="pagination">
                            <button class="page-btn prev">上一页</button>
                            <span>第1页 / 共2页</span>
                            <button class="page-btn next">下一页</button>
                        </div>

                        {/* 就诊人、卡号、总价 */}
                        <div class="patient-info">
                            <div class="patient-details">
                                <p>就诊人：{billData.patient}</p>
                                <p>就诊卡号：{billData.medicalNo}</p>
                            </div>
                            <div class="total-price">
                                <p>¥{billData.total.toFixed(2)}</p>
                                <p>合计价格</p>
                            </div>
                        </div>

                        {/* 操作按钮 */}
                        <div class="action-buttons">
                            <button class="btn return">返回</button>
                            <button class="btn pay">去支付</button>
                        </div>
                    </div>
                </div>
            ) : null;
    },
});
